var pages = document.querySelector('.pages');
var locale = window.navigator.language || 'en-us';

var date = new Date();
console.log('date:'+date);//Sat Sep 12 2020 20:56:38 GMT+0800 (中国标准时间)
var dayNum = date.getDate();
console.log('dayNum:'+dayNum);//12
var month = date.getMonth();
console.log('month:'+month);//8
var dayName = date.toLocaleString(locale,{weekday:'long'});
console.log('dayName:'+dayName);
var monthName = date.toLocaleString(locale,{month:'long'});
console.log('monthName:'+monthName);
var year = date.getFullYear();
console.log('year:'+year);

function daysInMonth(month,year){
    return new Date(year,month+1,0).getDate();
}

//点击日历新日历
function getNewDate(){
    //日期的操作
    if(dayNum < daysInMonth(month,year)){
        dayNum++;
    }else{
        dayNum = 1;
    }
    //月份的操作
    if(dayNum ===1 && month <11){
        month++;
    }else if(dayNum ===1 && month === 11){
        month = 0;
    }
    if(dayNum === 1 && month ===0){
        year++;
    }
    var newDate = new Date(year,month,dayNum);
    dayName = newDate.toLocaleString(locale,{weekday:'long'});
    monthName = newDate.toLocaleString(locale,{month:'long'});
}


function handleClick(e){
    getNewDate();
    updateCal(e.target);
}

//事件
function updateCal(target){
    if(target && target.classList.contains('page')){
        target.classList.add('tear');
        setTimeout(function(){
            pages.removeChild(target);
        },800)
    }else{
        return;
    }
    renderPage()
}

function renderPage(){
    var newPage = document.createElement('div');
    newPage.classList.add('page');
    newPage.innerHTML = '\n    <p class="month">' +
    monthName + '</p>\n    <p class="day">' +
    dayNum + '</p>\n    <p class="day-name">' +
    dayName + '</p>\n    <p class="year">' +
    year + '</p>\n  ';

    pages.appendChild(newPage);
}

renderPage();

pages.addEventListener('click',handleClick);